<script lang="ts">
    import { Button } from "../Button";
    import Icon from "../Common/Icons/Icon.svelte";
    import Cell from "./Cell.svelte";
    import { useDatepickerContext } from "./Datepicker.svelte";
    import { _ } from "svelte-i18n";

    const props = $props();
    const store = props.store;
    const ctx: any = useDatepickerContext();
    const year = $derived.by(() => {
        const index = props.name === "end" ? 1 : 0;
        if (props.type === "date" || props.type === "dateRange" || props.type === "dateTime" || props.type === "dateTimeRange" || props.type === "week" || props.type === "weekRange") {
            return store.currentMonth[index] && store.currentMonth[index].getFullYear && store.currentMonth[index].getFullYear();
        } else {
            if (props.value) {
                return props.value && props.value.getFullYear && props.value.getFullYear();
            } else {
                // if (props.type === "monthRange") {
                //     console.log(store.range?.[index]?.getFullYear());
                //     return store.range?.[index]?.getFullYear();
                // }
                return new Date().getFullYear();
            }
        }
    });

    const years = $derived.by(() => {
        const arr = [];
        let now = new Date().getFullYear();
        now = now - 60;
        for (let i = 0; i < 100; i++) {
            arr.push(now + i);
        }
        return arr;
    });
    const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    const month = $derived.by(() => {
        const index = props.name === "end" ? 1 : 0;
        if (props.type === "date" || props.type === "dateRange" || props.type === "dateTime" || props.type === "dateTimeRange" || props.type === "week" || props.type === "weekRange") {
            return store.currentMonth[index] && store.currentMonth[index].getMonth && store.currentMonth[index].getMonth() + 1;
        } else {
            if (props.value) {
                return props.value && props.value.getMonth && props.value.getMonth() + 1;
            } else {
                // if (props.type === "monthRange") {
                //     return store.range?.[index]?.getMonth() + 1;
                // }
                return new Date().getMonth() + 1;
            }
        }
    });

    const onSelect = (type: string, num: number) => {
        const index = props.name === "end" ? 1 : 0;
        const d = new Date(store.currentMonth[index]);
        if (type === "year") {
            d.setFullYear(num);
            // // 设置年份的时候月份处在禁用月份，选择未禁用的月份
            // let disabled = ctx && ctx.disabledDate && ctx.disabledDate(d);
            // while(disabled) {
            //     d.setMonth(d.getMonth() - 1);
            //     disabled = ctx && ctx.disabledDate && ctx.disabledDate(d);
            // }
        }
        if (type === "month") {
            d.setMonth(num - 1);
        }
        if (props.onMonthChange) {
            props.onMonthChange(d, type, props.name);
            return;
        }
        store.currentMonth = props.name === "end" ? [store.currentMonth[0], d] : [d, store.currentMonth[1]];
        // dateRange的时候不需要触发选择
        if (props.type !== "dateRange" && props.type !== "date") {
            ctx && ctx.onSelectDate && ctx.onSelectDate(d, props.name);
        }
    };
    const onBack = () => {
        props.onBack && props.onBack();
    };
</script>

<div class="cm-date-picker-month">
    {#if props.type === "date" || props.type === "dateRange" || props.type === "dateTime" || props.type === "dateTimeRange" || props.type === "week" || props.type === "weekRange"}
        <div class="cm-date-picker-month-header">
            <Button class="cm-date-picker-month-back-btn" theme="borderless" onclick={onBack}>
                {#snippet icon()}
                    <Icon icon="chevronLeft" size={16} />
                {/snippet}
                {$_("Datepicker.monthBack")}
            </Button>
        </div>
    {/if}
    <div class="cm-date-picker-month-body">
        <Cell data={years} value={year} day={store.currentMonth[0]} type="year" {onSelect} />
        {#if props.type !== "year" && props.type !== "yearRange"}
            <Cell data={months} value={month} day={store.currentMonth[0]} type="month" {onSelect} />
        {/if}
    </div>
</div>
